// index.js
// 获取应用实例
const app = getApp()
const option = {
  duration: 250, // 动画执行时间
  timingFunction: 'linear' // 动画执行效果
};
Page({
  data: {
    //路线
    // location: [57, 58, 51, 44, 45, 46, 53, 60, 67, 68, 69, 62, 55, 48, 41, 34, 27, 20, 13, 6, 5, 4, 11, 10, 9, 8, 7, 14, 21, 28, 35, 42, 49, 56],
    location: [{
        count: 57,
        translate: 'Y',
        direction: '-',
      },
      {
        count: 58,
        translate: 'Y',
        direction: '-',
      },
      {
        count: 51,
        translate: 'X',
        direction: '-',
      },
      {
        count: 44,
        translate: 'X',
        direction: '-',
      },
      {
        count: 45,
        translate: 'Y',
        direction: '-',
      },
      {
        count: 46,
        translate: 'Y',
        direction: '-',
      },
      {
        count: 53,
        translate: 'X',
        direction: '+',
      },
      {
        count: 60,
        translate: 'X',
        direction: '+',
      },
      {
        count: 67,
        translate: 'X',
        direction: '+',
      },
      {
        count: 68,
        translate: 'Y',
        direction: '-',
      },
      {
        count: 69,
        translate: 'Y',
        direction: '-',
      },
      {
        count: 62,
        translate: 'X',
        direction: '-',
      },
      {
        count: 55,
        translate: 'X',
        direction: '-',
      },
      {
        count: 48,
        translate: 'X',
        direction: '-',
      },
      {
        count: 41,
        translate: 'X',
        direction: '-',
      },
      {
        count: 34,
        translate: 'X',
        direction: '-',
      },
      {
        count: 27,
        translate: 'X',
        direction: '-',
      },
      {
        count: 20,
        translate: 'X',
        direction: '-',
      },
      {
        count: 13,
        translate: 'X',
        direction: '-',
      },
      {
        count: 6,
        translate: 'X',
        direction: '-',
      },
      {
        count: 5,
        translate: 'Y',
        direction: '-',
      },
      {
        count: 4,
        translate: 'Y',
        direction: '-',
      },
      {
        count: 11,
        translate: 'X',
        direction: '-',
      },
      {
        count: 10,
        translate: 'Y',
        direction: '-',
      },
      {
        count: 9,
        translate: 'Y',
        direction: '-',
      },
      {
        count: 8,
        translate: 'Y',
        direction: '-',
      },
      {
        count: 7,
        translate: 'Y',
        direction: '-',
      },
      {
        count: 14,
        translate: 'X',
        direction: '+',
      },
      {
        count: 21,
        translate: 'X',
        direction: '+',
      },
      {
        count: 28,
        translate: 'X',
        direction: '+',
      },
      {
        count: 35,
        translate: 'X',
        direction: '+',
      },
      {
        count: 42,
        translate: 'X',
        direction: '+',
      },
      {
        count: 49,
        translate: 'X',
        direction: '+',
      },
      {
        count: 56,
        translate: 'X',
        direction: '+',
      },
    ],
    // 人物位置
    figurePosition: {},
    // 人物所在第几个节点
    count: 0,
    // 控制骰子点击（要等上次结束后才能继续点击）
    flag: false,
    // 骰子数字
    diceNumber: 0,
    // 人物移动计时器
    timer: null,
    // 人物跳动画 移动位置使用过渡效果
    movingFigureAn: "",
  },
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#container').boundingClientRect()
    query.exec((res) => {
      const w = res[0].width / 7
      this.getNodePosition(w)
    })
  },
  onLoad() {
    
  },

  // 获取节点位置
  getNodePosition(w) {
    const location = this.data.location
    for (let index = 0; index < this.data.location.length; index++) {
      const element = this.data.location[index].count;
      const x = element % 7 * w;
      const y = Math.floor(element / 7) * w;
      location[index] = {
        ...location[index],
        x,
        y
      }
    }
    
    this.setData({
      location,
      figurePosition: location[this.data.count]
    })
  },

  // 点击骰子
  clickDice() {
    if (this.data.flag) return
    const d = Math.floor(Math.random() * 6 + 1)
    const count = this.data.count + d
    this.setData({
      flag: true,
      diceNumber: d
    })
    this.characterMovement(count)
  },

  // 人物移动
  characterMovement(count) {
    this.setData({
      movingFigureAn: null,
    })
    this.data.timer = setTimeout(() => {
      let c = this.data.count + 1
      // 跑完一圈，暂停
      if (c >= this.data.location.length) {
        clearTimeout(this.data.timer)
        wx.showModal({
          title: '提示',
          content: '恭喜你跑完一圈',
          showCancel: false,
          complete: (res) => {
            this.setData({
              timer: null,
              flag: false,
              count: 0,
              figurePosition: this.data.location[0],
              movingFigureAn: null,
            })
          }
        })
        return
      }

      // 跳到骰子投出来的数字，暂停
      if (this.data.count >= count) {
        clearTimeout(this.data.timer)
        this.setData({
          timer: null,
          flag: false,
          movingFigureAn: null,
        })
        return
      }

      const movingFigureAn = wx.createAnimation(option); // 创建动画
      const el = this.data.location[c]
      console.log(c, el);
      const direction = el.direction === '+' ? 30 : -30


      if (el.translate === 'X') {
        movingFigureAn.translateX(direction).step()
        movingFigureAn.translateX(0).step()
      } else {
        movingFigureAn.translateY(direction).step()
        movingFigureAn.translateY(0).step()
      }

      this.setData({
        count: c,
        movingFigureAn: movingFigureAn,
        figurePosition: el
      })

      this.characterMovement(count)
    }, 500)
  }
})